<template>
  <div>
    <div class="lg-header"><div class="logo"><img src="../assets/login-media.svg" alt=""></div></div>
    <div class="loginBox">
      <div class="clg-mod-tit">易电云</div>
      <input autofocus class="clg-input" v-model.trim="companyName" type="text" placeholder="公司名称">
      <input class="clg-input" v-model.trim="userName" type="text" placeholder="用户名">
      <input class="clg-input" v-model.trim="password" type="password" placeholder="密码">
      <div class="clg-btn" v-show="!isLoading" @touchstart="login">登 录</div>
      <div class="clg-btn" v-show="isLoading">
        <i class="one"></i>
        <i class="two"></i>
        <i class="three"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      isLoading: false,
      companyName: '',
      userName: '',
      password: ''
    }
  },
  methods: {
    login () {
      if (this.companyName === '') {
        alert('请输入公司名!')
        return
      }
      if (this.userName === '') {
        alert('请输入用户名!')
        return
      }
      if (this.password === '') {
        alert('请输入密码!')
        return
      }
      this.isLoading = true
      var name = this.companyName + '-' + this.userName
      /* eslint-disable */
      var password = md5(this.password)
      /* eslint-enable */
      this.newProjectDwr.checkLogin(name, password, res => {
        this.isLoading = false
        console.log(res)
        if (res.userId) {
          localStorage.setItem('companyName', this.companyName)
          localStorage.setItem('userName', this.userName)
          delete res.userName
          for (var i in res) {
            localStorage.setItem(i, res[i])
          }
          this.$router.push('/')
        } else {
          alert('用户名与密码不匹配!')
        }
      })
    }
  },
  mounted () {
    var companyName = localStorage.getItem('companyName')
    var userName = localStorage.getItem('userName')
    if (companyName) {
      this.companyName = companyName
    }
    if (userName) {
      this.userName = userName
    }
  }
}
</script>

<style scoped>
  .one {
    animation-delay: -.32s;
}
  .two {
    animation-delay: -.16s;
}
  @keyframes bouncedelay {
    0%, 100%, 80% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    opacity: 1;
}
    40% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: .8;
}
  }
  i{
    background: #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: bouncedelay .7s infinite ease-in-out both;
    margin: 0 6px;
  }
  .clg-btn{
    height: 45px;
    background-color: #00a4ff;
    color: #fff;
    line-height: 45px;
    text-align: center;
  }
  .clg-input:focus{
    border-color: #00a4ff;
    outline: 0;
}
  .clg-input{
    font-size: 14px;
    height: 45px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    width: 100%;
    -webkit-appearance: none;
    box-sizing: border-box;
    margin-bottom: 15px;
    border-radius: 0;
    line-height: 28px;
    vertical-align: middle;
  }
.lg-header{
  padding-top: 95px;
}
  .logo{
    width: 66px;
    height: 48px;
    overflow: hidden;
    margin: 0 auto;
  }
  .loginBox{
    padding: 30px 15px;
  }
  .clg-mod-tit {
    font-size: 24px;
    line-height: 33px;
    margin-bottom: 30px;
    text-align: center;
}
  @media screen and (max-width: 359px) {
    .lg-header {
        padding-top: 30px;
    }
  }
</style>
